<script setup lang="ts">
import { useLoadMore } from 'vue-request'
import { fetchAboutInfoAPI } from '@/apis/fetchAboutInfo'
import { useUserInfoStore } from '@/store/userInfo'
import { useRouterGuards } from '@/composables/useRouterGuards'

const router = useRouter()
const routerGuards = useRouterGuards()

const hospital = ref<Hospital | null>(null)

// 分页列表数据
const { dataList, loading, loadingMore, noMore, loadMore } = useLoadMore<LoadMoreData<Doctor>>(
  fetchData,
  { isNoMore: d => d?.list.length === d?.total },
)

// “加载更多”的状态
const loadMoreStatus = computed(() => {
  if (loadingMore.value)
    return 'loading'
  else if (noMore.value)
    return 'nomore'
  else
    return 'loadmore'
})

onReachBottom(() => loadMore())

/**
 * @description 分页服务函数
 */
async function fetchData(d?: LoadMoreData<Doctor>): Promise<LoadMoreData<Doctor>> {
  // 当前页数
  const _page = d?.page ? d.page + 1 : 1

  const res = await fetchAboutInfoAPI(
    { page: _page.toString(), limit: '10' },
  )

  hospital.value = res.data?.data.hospital || null

  return {
    list: res.data?.data.data || [],
    page: _page,
    total: res.data?.data.total || 9999,
  }
}

function handleCall() {
  uni.makePhoneCall({
    phoneNumber: hospital.value?.mobile || '',
  })
}

function handleNavigation() {
  if (hospital.value?.latitude && hospital.value.longitude) {
    uni.openLocation({
      name: hospital.value.address,
      latitude: Number(hospital.value?.longitude),
      longitude: Number(hospital.value.latitude),
    })
  }
}

function handleTapDoctorCard(id: string) {
  routerGuards(() => {
    router.push({
      name: 'doctorDetail',
      params: { id },
    })
  })
}
</script>

<template>
  <view class="min-h-screen bg-#F8F8F8">
    <!-- 顶部图 START -->
    <view class="absolute left-0 top-0">
      <uv-image width="750rpx" height="460rpx" :src="withDomain(hospital?.image || '')">
        <template #loading>
          <uv-loading-icon color="#666666" />
        </template>
      </uv-image>
    </view>
    <!-- 顶部图 END -->
    <Spacer height="420" />
    <!-- 介绍区域 START -->
    <view class="relative z-1 rounded-40rpx bg-white px-40rpx">
      <Spacer height="46" />
      <view class="flex items-center">
        <view class="rounded-10rpx bg-#4999F7 px-8rpx py-3rpx text-24rpx text-white leading-32rpx">
          医院
        </view>
        <Spacer width="12" />
        <view class="text-40rpx text-#333333 font-semibold leading-56rpx">
          {{ hospital?.hospital_name }}
        </view>
      </view>
      <Spacer height="24" />
      <view class="text-28rpx text-#848484 leading-40rpx">
        {{ hospital?.hospital_introduce }}
      </view>
      <Spacer height="40" />
      <Divider width="670" color="#E6E6E6" />
      <view class="flex py-40rpx">
        <view class="text-28rpx text-#333333 font-medium leading-40rpx">
          营业时间：
        </view>
        <view class="max-w-420rpx whitespace-pre text-28rpx text-#848484 leading-40rpx">
          {{ hospital?.trade_time }}
        </view>
      </view>
      <Divider width="670" color="#E6E6E6" />
      <view class="flex items-center justify-between">
        <view class="flex py-40rpx">
          <view class="text-28rpx text-#333333 font-medium leading-40rpx">
            医院电话：
          </view>
          <view class="max-w-420rpx text-28rpx text-#848484 leading-40rpx">
            {{ hospital?.mobile }}
          </view>
        </view>
        <image
          class="h-44rpx w-44rpx"
          src="@/static/images/phone_blue.png"
          @tap="handleCall"
        />
      </view>
      <Divider width="670" color="#E6E6E6" />
      <view class="flex items-center justify-between">
        <view class="flex py-40rpx">
          <view class="text-28rpx text-#333333 font-medium leading-40rpx">
            医院地址：
          </view>
          <view class="max-w-420rpx text-28rpx text-#848484 leading-40rpx">
            {{ hospital?.address }}
          </view>
        </view>
        <image
          class="h-44rpx w-44rpx"
          src="@/static/images/navigation_icon.png"
          @tap="handleNavigation"
        />
      </view>
    </view>
    <!-- 介绍区域 END -->
    <!-- Tab 标签栏 START -->
    <view class="relative flex items-center justify-center">
      <!-- tab 指示器 -->
      <image
        class="absolute top-100rpx h-20rpx w-54rpx transition-all duration-300 ease-out"
        src="@/static/images/arc.png"
      />
      <view class="h-138rpx w-255rpx flex items-center justify-center">
        <view
          class="text-36rpx text-#333333 font-medium leading-50rpx"
        >
          医生团队
        </view>
      </view>
    </view>
    <!-- Tab 标签栏 END -->
    <!-- 列表 START -->
    <view v-if="dataList.length > 0" class="px-24rpx">
      <DoctorItem
        v-for="item in dataList"
        :key="item.id"
        :picture="withDomain(item.image)!"
        :name="item.username"
        :position="item.position"
        :desc="item.introduce"
        :skills="item.server_project.split(',')"
        @tap="handleTapDoctorCard(item.id.toString())"
      />
      <uv-load-more v-if="dataList.length > 3" :status="loadMoreStatus" @loadmore="loadMore" />
    </view>
    <PageDefault v-else>
      暂无医生
    </PageDefault>
    <!-- 列表 END -->
    <Spacer height="240" />
  </view>
  <uv-loading-page :loading="loading && !loadingMore" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'about'
style:
  navigationBarTitleText: '关于医院'
layout: 'custom'
</route>
